<template>
  <div class="orderdetails">
    <mt-header fixed title="订单列表">
      <router-link to slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)">返回</mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="curr_back">
      <img src="../../../static/image/currentduan.png" />
    </div>
    <div class="order_nav">
      <div class="container">
        <div class="choose_oDiv">
          <div class="choose" @click="open('datatimePicker')">
            {{ startTime }}
          </div>
          <mt-datetime-picker
            ref="datatimePicker"
            v-model="timeValue"
            :startDate="new Date('2000/01/01 12:00')"
            @confirm="handleChange"
          ></mt-datetime-picker>
          <div class="choose" @click="close('datatimePicker1')">
            {{ startTime1 }}
          </div>
          <mt-datetime-picker
            ref="datatimePicker1"
            v-model="timeValue1"
            :startDate="new Date('2000/01/01 12:00')"
            @confirm="handleChange1"
          ></mt-datetime-picker>
        </div>

        <img src="../../../static/image/time.png" class="order_img" />
      </div>

      <div class="search">
        <form action="javascript:return true;">
          <input
            type="search"
            placeholder="搜索相关内容"
            v-model="searchVal"
            @keyup.13="show()"
            ref="input1"
          />
        </form>
        <img src="../../../static/image/CombinedShape.png" />
      </div>
    </div>
    <div class="ranking">
      <div
        v-infinite-scroll="getCardList"
        infinite-scroll-disabled="moreLoading"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false"
      >
        <div
          class="ran_oitem"
          v-for="(item, index) in orderList"
          :key="index"
          @click="Details(item)"
        >
          <span>{{ item.goodsName }}</span>
          <span>{{ item.createdAt | formatDate }}</span>
        </div>
      </div>
    </div>
     <div class="ranking" v-show="nothing" style="margin-bottom:2rem;">
      <img src="../../../static/image/nothing.png" alt />
      <div class="ranking_zi">没有更多数据</div>
    </div>


  </div>
</template>
<script>
import {
  DatetimePicke,
  InfiniteScroll,
  Header,
  Indicator,
  Toast,
 
} from "mint-ui";
import { ordeist } from "../../api/api.js";
import querystring from "query-string";
export default {
  name: "Orderdetails",
  data() {
    return {
      timeValue: "",
      timeValue1: "",
      startTime: "2019/02/02 12:00",
      startTime1: "2020/01/01 12:00",
      pageNo: 2,
      orderList: [],
      queryLoading: true,
      moreLoading: false,
      allLoaded: false,
      searchVal: "",
       nothing:false,
        iosShow:false
    };
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  methods: {
    open(picker) {
      //开始时间
      // 初始化时间为当前时间，可填满上部空白，可选过期时间
      if (this.startTime) {
        this.timeValue = this.startTime;
      } else {
        this.timeValue = new Date();
      }
      this.$refs[picker].open();
    },
    close(picker) {
      //结束时间
      if (this.startTime1) {
        this.timeValue1 = this.startTime1;
      } else {
        this.timeValue1 = new Date();
      }
      this.$refs[picker].open();
    },
    handleChange(value) {
      // 转化为正常时间格式
      this.startTime = this.$moment(value).format("YYYY/MM/DD HH:mm");
      // 将时间格式转化为时间戳
      // let  timedata = this.$moment(value, 'YYYY-MM-DD HH:mm:ss').valueOf()
    },
    handleChange1(value) {
      // 转化为正常时间格式
      this.startTime1 = this.$moment(value).format("YYYY/MM/DD HH:mm");
      console.log(this.startTime1);
      // 将时间格式转化为时间戳
      // let timedata = this.$moment(value, 'YYYY-MM-DD HH:mm:ss').valueOf()
      let that = this;
      that.bus.$emit("loading", true); //开始
      this.pageNo = 1;
      this.queryLoading = true;
      this.moreLoading = false;
      this.allLoaded = false;
      this.orderList = [];
      let params = {
        pageNo: 1,
        pageSize: 20,
        beginTime: this.startTime,
        endTime: this.startTime1
      };
      params = querystring.stringify(params);
      let a = localStorage.getItem("token");
      a = JSON.parse(a);
      ordeist(params, a).then(res => {
        if (res.data.code == 1) {
          that.orderList = res.data.data;
          if (that.orderList.length == 0) {
            that.nothing = true;
          } else {
            that.nothing = false;
          }
        } else {
          Toast(res.data.message);
        }
        that.bus.$emit("loading", false); //结束
      });
    },
    //搜索
    show() {
      Indicator.open("加载中...");
      this.$refs.input1.blur();
      this.pageNo = 1;
      this.queryLoading = true;
      this.moreLoading = false;
      this.allLoaded = false;
      this.orderList = [];
      var params = {
        pageNo: 1,
        pageSize: 10,
        orderId: this.searchVal,
        transactionId: this.searchVal
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ordeist(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.orderList = res.data.data;
          if (this.orderList.length == 0) {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    ordeist() {
      let that = this;
      that.bus.$emit("loading", true); //开始
      let params = {
        pageNo: 1,
        pageSize: 20
      };
      params = querystring.stringify(params);
      let a = localStorage.getItem("token");
      a = JSON.parse(a);
      ordeist(params, a).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          that.orderList = res.data.data;
          if (that.orderList.length == 0) {
            that.nothing = true;
          } else {
            that.nothing = false;
          }
        } else {
          Toast(res.data.message);
        }
        that.bus.$emit("loading", false); //结束
      });
    },
     //判断是安卓还是ios
        Phonetype(){
           let ua = navigator.userAgent;
           console.log(ua)
        //Android终端
            //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;  
           // console.log(isAndroid)
        　   //Ios终端
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
            if(!isiOS){
              this.iosShow = true;
            }
        },
    //上拉加载
    getCardList() {
      if (this.allLoaded) {
        this.moreLoading = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoading = true;
      var params = {
        pageNo: this.pageNo,
        pageSize: 10,
        beginTime: this.startTime,
        endTime: this.startTime1,
        orderId: this.searchVal,
        transactionId: this.searchVal
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ordeist(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNo += res.data.data.length;
            res.data.data.forEach(element => {
              this.orderList.push(element);
            });
            this.moreLoading = false;
          } else {
            this.allLoaded = true;
            this.moreLoading = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //跳转订单详情
    Details(item) {
      this.$router.push({
        path: "/Branch/details",
        query: { orderId: item.id }
      });
    }
  },
  mounted() {
    this.ordeist();
  },
  created(){
    this.Phonetype()
  }
};
</script>
<style lang="scss" scoped>
.mint-header {
  background: #ffffff;
  color: #333333;
}
.orderdetails {
  width: 100%;
  height: auto;
  padding-top: 40px;
}
.curr_back {
  width: 100%;
  height: 1.7rem;
  position: relative;
}
.curr-txt {
  position: absolute;
  color: #fff;
  top: 1rem;
  font-size: 0.36rem;
  left: 0.68rem;
  z-index: 999;
}
.curr_back img {
  width: 100%;
  height: 100%;
}
.order_nav {
  width: 100%;
  height: 1.4rem;
  display: flex;
}
.container {
  display: flex;
  position: relative;
  width: 40%;
}
.choose {
  font-size: 0.3rem;
  text-align: center;
  margin-left: 0.1rem;
}
.choose_oDiv {
  margin-top: 0.25rem;
}
.order_img {
  width: 0.36rem;
  height: 0.32rem;
  position: absolute;
  top: 0.54rem;
  left: 2.85rem;
}
.section {
  /* background:#CABBC7; */
  padding-top: 0.05rem;
  display: flex;
  font-size: 0.25rem;
}
.search {
  height: 1.4rem;
  display: flex;
  position: relative;
}
.search input {
  margin-top: 0.44rem;
  margin-left: 0.5rem;
  font-size: 0.25rem;
  width: 3.52rem;
  height: 0.72rem;
  background: #dfe2ee;
  box-sizing: border-box;
  padding-left: 0.2rem;
  border: none;
}
.search img {
  width: 0.28rem;
  height: 0.28rem;
  position: absolute;
  right: 0.2rem;
  top: 0.64rem;
}
.order_oitem {
  width: 100%;
  height: auto;
}
.order_oitem1 {
  width: 80%;
  height: 0.5rem;
  border: 0.02rem solid black;
  display: flex;
  justify-content: space-between;
  line-height: 0.5rem;
  margin: auto;
  font-size: 0.25rem;
  margin-top: 0.1rem;
}

.ranking {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding-top: 0.26rem;
  background: #f9f9f9;
  // margin-bottom: 0.5rem;
   margin-bottom: 1.5rem;
  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
    margin-top: 1.8rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
  font-size: 0.28rem;
}
.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0 0.04rem 0.28rem 0 rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
}
.ran_oitem span:nth-of-type(1) {
  margin-left: 0.32rem;
  width: 3.58rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ran_oitem span:nth-of-type(2) {
  margin-right: 0.14rem;
  color: #666666;
}
</style>